<template>
  <client-only>
    <div class="nav-container page-component" v-cloak>
      <!--左侧导航 #start -->
      <div class="nav left-nav">
        <div class="nav-item selected">
          <span class="v-link selected dark" :onclick="
            'javascript:window.location=\'/hosp/' + hospital.hoscode + '\''
          ">预约挂号
          </span>
        </div>
        <div class="nav-item ">
          <span class="v-link clickable dark" :onclick="
            'javascript:window.location=\'/hosp/details/' + hospital.hoscode + '\''
          ">
            医院详情
          </span>
        </div>
        <div class="nav-item">
          <span class="v-link clickable dark" :onclick="
            'javascript:window.location=\'/hosp/notice/' + hospital.hoscode + '\''
          ">
            预约须知
          </span>
        </div>
        <div class="nav-item ">
          <span class="v-link clickable dark"> 停诊信息 </span>
        </div>
        <div class="nav-item ">
          <span class="v-link clickable dark"> 查询/取消 </span>
        </div>
      </div>
      <!-- 左侧导航 #end -->
      <!-- 右侧内容 #start -->
      <div class="page-container">
        <div class="hospital-home">
          <div class="common-header">
            <div class="title-wrapper">
              <span class="hospital-title">{{ hospital.hosname }}</span>
              <div class="icon-wrapper">
                <span class="iconfont"></span>{{ dictName }}
              </div>
            </div>
          </div>
          <div class="info-wrapper">
            <img class="hospital-img" v-if="hospital.logoData" :src="'data:image/jpg;base64,' + hospital.logoData"
              :alt="hospital.hosname" />
            <div class="content-wrapper">
              <div>挂号规则</div>
              <div class="line">
                <div>
                  <span class="label">预约周期：</span><span>{{ bookingRule.cycle }}天</span>
                </div>
                <div class="space">
                  <span class="label">放号时间：</span><span>{{ bookingRule.releaseTime }}</span>
                </div>
                <div class="space">
                  <span class="label">停挂时间：</span><span>{{ bookingRule.stopTime }}</span>
                </div>
              </div>
              <div class="line">
                <span class="label">退号时间：</span>
                <span v-if="bookingRule.quitDay == -1">就诊前一工作日{{ bookingRule.quitTime }}前取消</span>
                <span v-if="bookingRule.quitDay == 0">就诊前当天{{ bookingRule.quitTime }}前取消</span>
              </div>
              <div style="margin-top:20px">医院预约规则</div>
              <div class="rule-wrapper">
                <ol>
                  <li v-for="item in bookingRule.rule" :key="item">{{ item }}</li>
                </ol>
              </div>
            </div>
          </div>
          <div class="title select-title">选择科室</div>
          <div class="select-dept-wrapper">
            <div class="department-wrapper">
              <div class="hospital-department">
                <div class="dept-list-wrapper el-scrollbar" style="height: 100%;">
                  <div class="dept-list el-scrollbar__wrap" style="margin-bottom: -17px; margin-right: -17px;">
                    <div class="el-scrollbar__view">
                      <div class="sub-item" v-for="(item, index) in departmentVoList" :key="item.depcode"
                        :class="index == activeIndex ? 'selected' : ''" @click="move(index, item.depcode)">
                        {{ item.depname }}
                      </div>
                    </div>
                  </div>
                  <div class="el-scrollbar__bar is-horizontal">
                    <div class="el-scrollbar__thumb" style="transform: translateX(0%);"></div>
                  </div>
                  <div class="el-scrollbar__bar is-vertical">
                    <div class="el-scrollbar__thumb" style="transform: translateY(0%); height: 91.4761%;"></div>
                  </div>
                </div>
              </div>
            </div>
            <div class="sub-dept-container">
              <div v-for="(item, index) in departmentVoList" :key="item.depcode" :class="index == 0 ? 'selected' : ''"
                class="sub-dept-wrapper" :id="item.depcode">
                <div class="sub-title">
                  <div class="block selected"></div>
                  {{ item.depname }}
                </div>
                <div class="sub-item-wrapper">
                  <div v-for="it in item.children" :key="it.depcode" class="sub-item" @click="schedule(it.depcode)">
                    <span class="v-link clickable">{{ it.depname }} </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 右侧内容 #end -->
    </div>
  </client-only>
</template>

<script>
import '~/assets/css/hospital_personal.css'
import '~/assets/css/hospital.css'
import cookie from 'js-cookie'

export default {
  data () {
    return {
      // 医院编号
      hoscode: '',
      // 医院详情信息
      hospital: {},
      // 规则信息
      bookingRule: {},
      // 科室信息
      departmentVoList: [],
      // 选中索引
      activeIndex: -1,
      // 医院等级名称
      dictName: ''
    }
  },
  methods: {
    // 查询医院信息的方法
    showHospitalInfo () {
      this.$axios.get(`/admin/hosp/nuxtHospital/findOneHospitalAllInfo/${this.hoscode}`).then(({ data }) => {
        this.hospital = data.data
        this.bookingRule = data.data.bookingRule
        this.dictName = this.hospital.param.dictName
      }).catch(e => {
        this.$message.error('医院信息出现错误')
      })
    },
    // 查询医院科室的信息
    showDepartmentInfo () {
      this.$axios.get(`/admin/hosp/nuxtHospital/findDepartmentByHoscode/${this.hoscode}`).then(({ data }) => {
        this.departmentVoList = data.data
      }).catch(e => {
        this.$message.error('科室信息出现错误')
      })
    },
    // 移动到选择的大科室位置
    move (index, depcode) {
      // 使用这个会直接前往
      // window.location.href = '#' + depcode
      // 这个是慢慢滑动前往
      document.getElementById(depcode).scrollIntoView({
        block: 'start',
        inline: 'nearest',
        behavior: 'smooth'
      })
    },
    // 点击小科室查看排班
    schedule (depcode) {
      // 进行跳转，查看排班
      // 登录判断
      let token = cookie.get('token')
      if (!token) {
        loginEvent.$emit('loginDialogEvent')
        return
      }
      this.$axios.get(`/api/user/userInfo/auth/getUserInfo`).then(({ data }) => {
        let authStatus = data.data.authStatus
        // 判断是否已经认证，没有认证则跳转到认证页面
        if (!authStatus || authStatus != 2) {
          window.location.href = '/user'
          return
        }
        window.location.href = '/hosp/schedule?hoscode=' + this.hoscode + '&depcode=' + depcode
      }).catch(e => {
        this.$message.error('出现错误，请稍后再试')
      })
    },

  },
  created () {
    this.hoscode = this.$route.params.hoscode
    this.showHospitalInfo()
    this.showDepartmentInfo()
  }
}
</script>

<style>
[v-cloak] {
  display: none;
}
</style>
